<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AI提醒助手</title>
  <style>
    body {
      width: 250px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      padding: 16px;
      margin: 0;
    }
    
    h1 {
      font-size: 18px;
      margin-top: 0;
      margin-bottom: 16px;
      color: #24292e;
      display: flex;
      align-items: center;
    }
    
    h1 .icon {
      background-color: #4d9cff;
      color: white;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
    }
    
    p {
      font-size: 14px;
      color: #57606a;
      margin-bottom: 16px;
    }
    
    .settings {
      margin-top: 16px;
    }
    
    .setting-group {
      margin-bottom: 12px;
    }
    
    .setting-title {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 8px;
      color: #24292e;
    }
    
    .setting-options {
      display: flex;
      gap: 8px;
    }
    
    .setting-option {
      flex: 1;
      background-color: #f6f8fa;
      border: 1px solid #d0d7de;
      border-radius: 6px;
      padding: 8px;
      text-align: center;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.2s ease;
    }
    
    .setting-option:hover {
      background-color: #eaeef2;
    }
    
    .setting-option.active {
      background-color: #0969da;
      color: white;
      border-color: #0969da;
    }
    
    .footer {
      font-size: 12px;
      color: #57606a;
      margin-top: 16px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>
    <div class="icon">
      <svg viewBox="0 0 24 24" width="16" height="16">
        <path fill="currentColor" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,10.5A1.5,1.5 0 0,1 13.5,12A1.5,1.5 0 0,1 12,13.5A1.5,1.5 0 0,1 10.5,12A1.5,1.5 0 0,1 12,10.5M7.5,9.5C8.33,9.5 9,8.83 9,8C9,7.17 8.33,6.5 7.5,6.5C6.67,6.5 6,7.17 6,8C6,8.83 6.67,9.5 7.5,9.5M16.5,9.5C17.33,9.5 18,8.83 18,8C18,7.17 17.33,6.5 16.5,6.5C15.67,6.5 15,7.17 15,8C15,8.83 15.67,9.5 16.5,9.5M12,14.5C13.68,14.5 15.12,15.5 15.68,17H8.32C8.88,15.5 10.32,14.5 12,14.5Z"></path>
      </svg>
    </div>
    AI提醒助手
  </h1>
  
  <p>在搜索时提醒您考虑使用AI解决问题</p>
  
  <div class="settings">
    <div class="setting-group">
      <div class="setting-title">提醒强度</div>
      <div class="setting-options">
        <div class="setting-option" data-value="strong">强</div>
        <div class="setting-option active" data-value="medium">中</div>
        <div class="setting-option" data-value="weak">弱</div>
      </div>
    </div>
  </div>
  
  <div class="footer">
    Version 1.0
  </div>
  
  <script src="popup.js"></script>
</body>
</html> 